<!--
 * @Author: HuangBingQuan <17671241237@163.com>
 * @Date: 2025-01-16 11:50:19
 * @LastEditTime: 2025-01-16 16:11:23
 * @FilePath: /low-code-platform/src/components/SurveyComs/Materials/SelectComs/SingleSelect.vue
-->
<template>
    <div
        :class="{
            'text-center': computedState.position,
        }"
    >
        <MaterialsHeader
            :titleItalic="computedState.titleItalic"
            :titleWeight="computedState.titleWeight"
            :descItalic="computedState.descItalic"
            :descWeight="computedState.descWeight"
            :descSize="computedState.descSize"
            :titleSize="computedState.titleSize"
            :desc="computedState.desc"
            :title="computedState.title"
            :serialNum="serialNum"
            :titleColor="computedState.titleColor"
            :descColor="computedState.descColor"
        />
        <el-radio-group v-model="radioValue" class="flex wrap" @change="emitAnswer">
            <el-radio
                v-for="(item, index) in computedState.options"
                class="picOption flex mb-15"
                :value="item"
                :key="index"
            >
                {{ item }}
            </el-radio>
        </el-radio-group>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import MaterialsHeader from '../../Common/MaterialsHeader.vue';
import type { OptionsStatus } from "@/types";
import { getTextStatus, getStringStatus, getCurrentStatus, getStringStatusByCurrentStatus } from '@/utils';

const radioValue = ref<string>('');

watch(radioValue, (newVal)=> {
    console.log(newVal);
});

const props = defineProps<{
    serialNum: number,
    status: OptionsStatus
}>();

const computedState = computed(() => ({
    title: getTextStatus(props.status.title),
    desc: getTextStatus(props.status.desc),
    options: getStringStatus(props.status.options),
    position: getCurrentStatus(props.status.position),
    titleSize: getStringStatusByCurrentStatus(props.status.titleSize),
    descSize: getStringStatusByCurrentStatus(props.status.descSize),
    titleWeight: getCurrentStatus(props.status.titleWeight),
    descWeight: getCurrentStatus(props.status.descWeight),
    titleItalic: getCurrentStatus(props.status.titleItalic),
    descItalic: getCurrentStatus(props.status.descItalic),
    titleColor: getTextStatus(props.status.titleColor),
    descColor: getTextStatus(props.status.descColor)
}));
</script>

<style lang="scss" scoped></style>
